<template>
  <view class="page">
    <view class="tcard">
      <view class="title">
        健康档案
      </view>
      <view class="tform">
        <view class="tform-item">
          <view class="value">
            身高
          </view>
          <view class="flexR" style="align-items: baseline;">
            <input type="text" v-model="form.high" placeholder="请输入身高"/>
            <text>cm</text>
          </view>
        </view>
        <view class="tform-item">
          <view class="value">
            体重
          </view>
          <view class="flexR">
            <input type="text" v-model="form.weight" placeholder="请输入体重"/>
            <text>kg</text>
          </view>
        </view>
        <view class="tform-item">
          <view class="value">
            民族
          </view>
          <picker @change="pickerNation" range-key="label" :value="form.nation" :range="nationList">
            <view class="uni-input" :style="{color: form.nation === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">{{form.nation || '请选择民族'}}</view>
          </picker>
        </view>
        <view class="tform-item">
          <view class="value">
            学历
          </view>
          <picker @change="pickerSchool" range-key="label" :value="form.school" :range="schoolList">
            <view class="uni-input" :style="{color: form.school === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">{{form.school || '请选择学历'}}</view>
          </picker>
        </view>
        
        <view class="tform-item" style="border: none;">
          <view class="value">
            婚否
          </view>
          <picker @change="pickerMry" range-key="label" :value="form.marital_status" :range="mryList">
            <view class="uni-input" :style="{color: form.marital_status === undefined ? 'rgba(0, 0, 0, 0.24)' : ''}">{{mryList[form.marital_status]|| '请选择婚姻状况'}}</view>
          </picker>
        </view>
      </view>
    </view>
    
    <view class="btn-box">
      <view class="btn" @click="back">
        取消
      </view>
      <view class="btn" @click="sub">
        确认
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form:{},
        nationList: ['汉族','壮族','满族','回族','苗族','维吾尔族','土家族','彝族','蒙古族','藏族','布依族','侗族','瑶族','朝鲜族','白族','哈尼族','哈萨克族','黎族','傣族','畲族','傈僳族','仡佬族','东乡族','高山族','拉祜族','水族','佤族','纳西族','羌族','土族','仫佬族','锡伯族','柯尔克孜族','达斡尔族','景颇族','毛南族','撒拉族','布朗族','塔吉克族','阿昌族','普米族','鄂温克族','怒族','京族','基诺族','德昂族','保安族','俄罗斯族','裕固族','乌孜别克族','门巴族','鄂伦春族','独龙族','塔塔尔族','赫哲族','珞巴族'],
        schoolList: ['小学', '初中', '高中', '专科', '本科', '研究生', '博士', '博士后'],
        mryList: ['未婚', '已婚']
      }
    },
    methods: {
      pickerNation(e) {
        // this.sex = e.detail.value
        this.$set(this.form, 'nation', this.nationList[e.detail.value])
      },
      pickerSchool(e) {
        this.$set(this.form, 'school', this.schoolList[e.detail.value])
      },
      pickerMry(e) {
        this.$set(this.form, 'marital_status', e.detail.value)
      },
      sub() {
        uni.setStorageSync('heathRecords', this.form)
        uni.navigateBack()
      },
    }
  }
</script>

<style lang="scss" scoped>
uni-input {
  text-align: right;
  .uni-input-placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28upx;
    color: rgba(0,0,0,0.24);
  }
}
.btn-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .btn {
    width: 240upx;
    height: 64upx;
    background: $theme-color;
    border-radius: 64upx;
    text-align: center;
    line-height: 64upx;
    color: #FFF;
    &:nth-child(1) {
      background-color: transparent;
      border: 1px solid $theme-color;
      color: $theme-color;
    }
  }
}
</style>
